<section id="include">
  <div class="page-header">
    <h1>Include Fragment</h1>
  </div>
  <div class="row">
    <div class="span6">
      <h3>What?</h3>
      <p><code>uiInclude</code> is an alternative to <a
      href="http://docs.angularjs.org/api/ng.directive:ngInclude">ngInclude</a>
      that adds fragment support via a <code>fragment</code> attribute. The
      fragment attribute uses the <a
      href="http://docs.angularjs.org/api/angular.element">element.find()</a>
      API, and therefore requires jQuery in order to support full CSS
      selectors; Without jQuery, it falls back to Angular's jqLite
      implementation which is very limited as it only selects by element
      name.</p>
    </div>
    <div class="span6">
      <h3>Why?</h3>
      <p>Use this instead of <code>ngInclude</code> only if you need
      fragments. Fragment support has two primary uses: (1) it serves as a
      drop in replacement for <a
      href="http://api.jquery.com/load/">jQuery.load()</a>, which permits a
      subset of a requested document to be selected, and (2) because some
      people want to put multiple templates into a single file and they need a
      way to select which specific fragment to use.  The former use is
      expected to be benefit projects that are migrating from jQuery to
      Angular.</p>
    </div>
  </div>
  <div class="row">
    <div class="span12">
      <h3>Demo</h3>
      Choose fragment to load:
      <select ng-model="uiIncludeFragment">
        <option value="fragment-1">fragment-1</option>
        <option value="fragment-2">fragment-2</option>
        <option value="fragment-3">fragment-3</option>
      </select>
      <br/>
      Fragment content <span ng-show="uiIncludeFragment">(<code>fragment="'{{uiIncludeFragment}}'"</code>)</span>:
      <div class="well">
        <ui-include src="'demo/fragments.html'" fragment="uiIncludeFragment" ng-show="uiIncludeFragment"></ui-include>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="span12">
      <h3>How?</h3>
      <pre class="prettyprint">
&lt;ui-include src="'my/url/to/partial/file'" fragment="'#id-to-fragment'"&gt;&lt;/ui-include&gt;
&lt;!-- Don't forget to quote string literals! --&gt;
&lt;!-- Don't forget to include jQuery if you need full selector support! --&gt;
</pre>
    </div>
  </div>
</section>
